<!-- eslint-disable vue/require-v-for-key -->
<template>
  <transition>
    <div class="full-player" v-show="fullScreen">
      <button class="close" @click="fullScreen = false">收起来</button>
      {{ currentMusic.name }}
      {{ currentMusic.singer }}

      <van-swipe class="my-swipe" indicator-color="white" :loop="false">
        <van-swipe-item>
          <div>
            <div class="rotate" :class="isPlaying ? 'play' : 'pause'">
              <img :src="currentMusic.pic" alt="" width="150" height="150" />
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div
            style="height: 60vh; overflow: scroll; margin-top: 50px"
            class="lyr"
            ref="lyrNode"
            @touchstart="touchstart"
          >
            <li v-for="(item, index) in currentMusic.Lyric" :class="{ active: index === lyrIndex }">
              {{ item.word }}
            </li>
          </div>
        </van-swipe-item>
      </van-swipe>

      <div class="musicPlayer">
        <div class="progress-box">
          <span> {{ m2hm(currentMusic.currentTime) }}</span>
          <div class="progress-wrap" @click="changeTime" ref="progress">
            <div
              class="progress-inner"
              :style="{ width: (currentMusic.currentTime / currentMusic.duration) * 100 + '%' }"
            ></div>
          </div>
          <span>{{ m2hm(currentMusic.duration) }}</span>
        </div>

        <!-- 操作 -->
        <div class="ctrl">
          <button class="play-mode" @click="switchPlayMode">{{ modeMap[modeIndex].name }}</button>
          <button class="rev" @click="prev">上一首</button>
          <button class="play-btn" @click="togglePlay">
            <van-icon name="play-circle-o" v-show="!isPlaying" />
            <van-icon name="pause-circle-o" v-show="isPlaying" />
          </button>
          <button class="next" @click="ended">下一首</button>
        </div>
      </div>
    </div>
  </transition>

  <div class="mini-player" v-show="!fullScreen">
    <div class="img" @click="fullScreen = true">
      <img :src="currentMusic.pic" alt="" width="30" height="30" />
      <span>{{ currentMusic.name }}</span>
      <span>{{ currentMusic.singer }}</span>
    </div>
  </div>

  <audio
    hidden
    :src="currentMusic.url"
    ref="audio"
    @canplay="canplay"
    @timeupdate="timeupdate"
    @ended="ended"
    @play="play"
    @pause="pause"
  ></audio>
</template>

<script setup>
import { ref, toRefs } from 'vue'
import { usePlayer } from '@/stores/player'
import { m2hm } from '@/utils/timeTransform'
let audio = ref()

let progress = ref()
let lyrNode = ref()
let { musicList, currentMusic, currentIndex, randomMusicList, randomMusicIndex } = toRefs(
  usePlayer(audio.value)
)
let fullScreen = ref(true)

import useMode from './useMode'

let { modeMap, modeIndex, switchPlayMode } = useMode(
  audio,
  musicList,
  randomMusicList,
  randomMusicIndex
)

import useLyr from './useLyr'

let { touchstart, skip, scrollLyr, lyrIndex } = useLyr(currentMusic, lyrNode)

import usePlay from './usePlay'

let { canplay, timeupdate, changeTime, ended, togglePlay, play, pause, prev, isPlaying } = usePlay(
  audio,
  progress,
  currentMusic,
  skip,
  scrollLyr,
  modeMap,
  modeIndex,
  currentIndex,
  musicList,
  randomMusicIndex,
  randomMusicList
)
</script>

<style>
html,
body,
#app {
  height: 100%;
}
.full-player {
  width: 100%;
  height: 100%;
  background-color: aqua;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  opacity: 1;
  transform: translateY(0);
}
.mini-player {
  width: 100%;
  height: 60px;
  background-color: aqua;
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: -1px;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease-in-out;
}

/*  进入前 和离开后    */
.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

.musicPlayer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  left: 0;
}
.musicPlayer .progress-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.musicPlayer .progress-wrap {
  width: 260px;
  position: relative;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.8);
}
.musicPlayer .progress-inner {
  position: absolute;
  left: 0;
  height: 5px;
  top: -1px;
  background-color: red;
  width: 0;
}

.rotate {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  border-radius: 50%;
  overflow: hidden;
  animation: rotate 10s linear infinite;
}
.pause {
  animation-play-state: paused;
}
.play {
  animation-play-state: running;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.lyr {
  padding: 0 30px;
}
.lyr li {
  list-style: none;
  transition: all 0.3s;
}
.lyr .active {
  color: red;
  transform: scale(1.2);
}
.ctrl {
  position: relative;
  z-index: 999;
}
</style>
